{% extends 'index.html' %}

{% block style_content %}
    <style>
        #main {
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
            transition: box-shadow 0.3s ease-in-out;
        }

        #main:hover {
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
        }
    </style>
{% endblock %}


{% block content %}
    <div class="wrapper">
        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-right hide-phone">
                            <a href="{% url 'predict:download' %}" class="btn btn-outline-secondary btn-round waves-effect">
                            <i class="mdi mdi-cloud-download mr-2"></i>
                            下载分类结果
                            </a>
                        </div>
                        <div class="btn-group mt-2">
                            <h4 class="page-title">可视化预测结果</h4>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title end breadcrumb -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title" style="font-size: 18px">分类结果柱状图</h4>
                            <div id="main" style="width: 100%;height:400px; position: relative;"></div>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div><!-- end row -->

        </div><!-- end container -->
    </div>
{% endblock %}

{% block script_content %}
    <script src="/static/js/chart.min.js"></script>
    <script src="/static/js/console-ban.min.js"></script>
    <!-- 引入ECharts -->
    <script src="/static/js/echarts.min.js"></script>
    <script>
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          name: '类别',
          data: {{ unique|safe }}
        },
        yAxis: {name: '数量'},
        series: [{
          name: '数量',
          type: 'bar',
          data: {{ counts|safe }},
          label: {
            show: true,
            position: 'top'
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 在预测完成后取消等待界面
      $('#loading').hide();
    </script>
{% endblock %}
